<template>
	<view>
		<view class="my-top">
			<!-- head -->
			<view class="head" :style="'background-color: rgba(255,255,255,'+(scrollTop/50)+');'">
				<view class="portrait">
					<image v-show="scrollTop>20" :src="conf.commonBaseUrl+'h5/static/person.png'">
					</image>
				</view>
				<view class="title">
					<text v-show="scrollTop>20">我的</text>
				</view>
				<view class="setting-mess">
					<view class="setting" @click="onSetting">
						<text class="iconfont icon-setting" :style="scrollTop>20?'color:#333333':''"></text>
					</view>
					<view class="mess" @click="onMessage">
						<text class="iconfont icon-xiaoxi" :style="scrollTop>20?'color:#333333':''"></text>
					</view>
				</view>
			</view>
			<!-- 用户信息 -->
			<view class="user-info" v-if="isLogin">
				<view class="portrait">
					<image :src="personPng"></image>
				</view>
				<view class="info">
					<view class="nickname">
						<text>{{userName}}</text>
					</view>
					<view class="rank">
						<image :src="rankPng"></image>
						<text>v1</text>
					</view>
				</view>
			</view>
			<view class="user-info" v-else @click="onUserInfo">
				<view class="portrait">
					<image :src="personPng"></image>
				</view>
				<view class="info">
					<view class="nickname">
						<text>登录/注册</text>
					</view>
				</view>
			</view>
			<!-- 关注区 -->
			<!-- <view class="focus-area">
				<view class="list" @click="onCollect('goods')">
					<view class="num">
						<text>28</text>
					</view>
					<view class="title">
						<text>商品关注</text>
					</view>
				</view>
				<view class="list" @click="onCollect('content')">
					<view class="num">
						<text>28</text>
					</view>
					<view class="title">
						<text>店铺关注</text>
					</view>
				</view>
				<view class="list" @click="onCollect('record')">
					<view class="num">
						<text>28</text>
					</view>
					<view class="title">
						<text>浏览记录</text>
					</view>
				</view>
			</view> -->
			<!-- 会员 -->
			<!--<view class="vip-info" @click="_toIntegral()">
				<view class="vip">
					<text>积分兑换</text>
					<text class="line"></text>
				</view>
				<view class="vip-explain">
					<text>本店开通积分可以兑换商品</text>
				</view>
				<view class="vip-btn">
					<text>立即查看</text>
				</view>
			</view>-->
		</view>
		<!-- 钱包 -->
		<view class="wallet-info">
			<!--<view class="list">
				<view class="icon">
					<text class="number">{{accountInfo.integral}}</text>
				</view>
				<view class="title">
					<text>积分</text>
				</view>
			</view>
			<view class="list">
				<view class="icon">
					<text class="number">{{accountInfo.integralMoney}}</text>
				</view>
				<view class="title">
					<text>积分金额</text>
				</view>
			</view>-->
			<view class="list">
				<view class="icon">
					<text class="number">{{accountInfo.cash}}</text>
				</view>
				<view class="title">
					<text>余额</text>
				</view>
			</view>
			<view class="list">
				<view class="icon">
					<text class="number">{{accountInfo.vipLevelName}}</text>
				</view>
				<view class="title">
					<text class="action">会员等级</text>
				</view>
			</view>
		</view>
		<!-- 我的服务 -->
		<view class="my-service">
			<view class="title">
				<text>我的订单</text>
			</view>
			<view class="service-list">
				<navigator url="/pages/order/order?stat=1001" open-type="switchTab" class="list">
					<view class="thumb">
						<image :src="payA"></image>
					</view>
					<view class="name">
						<text>全部订单</text>
					</view>
				</navigator>
				<navigator url="/pages/order/order?stat=2002" open-type="switchTab" class="list">
					<view class="thumb">
						<image :src="payB"></image>
					</view>
					<view class="name">
						<text>待发货</text>
					</view>
				</navigator>
				<navigator url="/pages/order/order?stat=4004" open-type="switchTab" class="list">
					<view class="thumb">
						<image :src="payC"></image>
					</view>
					<view class="name">
						<text>待评价</text>
					</view>
				</navigator>
				<navigator url="/pages/order/order?stat=5005" open-type="switchTab" class="list">
					<view class="thumb">
						<image :src="payD"></image>
					</view>
					<view class="name">
						<text>退单</text>
					</view>
				</navigator>
				<navigator url="/pages/myOrder/myGroupProductOrder" open-type="navigate" class="list">
					<view class="thumb">
						<image :src="payE"></image>
					</view>
					<view class="name">
						<text>拼团订单</text>
					</view>
				</navigator>
				<!--<navigator url="/pages/affiliate/affiliate" open-type="navigate" class="list">
					<view class="thumb">
						<image :src="pwdPng"></image>
					</view>
					<view class="name">
						<text>分销</text>
					</view>
				</navigator>-->
			</view>
		</view>
		<!-- 我的服务 -->
		<view class="my-service">
			<view class="title">
				<text>我的服务</text>
			</view>
			<view class="service-list">
				<view class="list" @click="onServer('feedback')">
					<view class="thumb">
						<image :src="addressPng"></image>
					</view>
					<view class="name">
						<text>收货地址</text>
					</view>
				</view>
				<view class="list" @click="onServer('serve')">
					<view class="thumb">
						<image :src="kfrxPng"></image>
					</view>
					<view class="name">
						<text>客服热线</text>
					</view>
				</view>
				<view class="list" @click="toOrder('/pages/public/resetPwd')">
					<view class="thumb">
						<image :src="pwdPng"></image>
					</view>
					<view class="name">
						<text>修改密码</text>
					</view>
				</view>
			</view>
		</view>

		<view style="margin: 25rpx;" v-if="isLogin">
			<button class="btn-primary" @tap="_logout()">退 出</button>
		</view>

		<view class="cu-modal" :class="logoutUser==true?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">退出系统</view>
					<view class="action" @tap="_cancleLogout()">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					您确认退出系统吗？
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action margin-0 flex-sub  solid-left" @tap="_cancleLogout()">取消</view>
					<view class="action margin-0 flex-sub text-green solid-left" @tap="_doLogoutUser()">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import conf from '@/conf/config.js'
	import {
		getUserInfo,
		queryShopUserAccountAndVip,
		outUserLogin,
		getUserName,
		getUserId
	} from '@/api/user/userApi.js'
	import {
		getShops,
		getShopId
	} from '@/api/shop/shopApi.js'
	import url from '@/constant/url.js';
	export default {
		name: "profile",
		data() {
			return {
				personPng: conf.commonBaseUrl + 'h5/static/person.jpg',
				rankPng: conf.commonBaseUrl + 'h5/static/rank.png',
				addressPng: conf.commonBaseUrl + 'h5/static/images/user/icon-address.png',
				kfrxPng: conf.commonBaseUrl + 'h5/static/kfrx.png',
				pwdPng: conf.commonBaseUrl + 'h5/static/changePwd.png',
				payA: conf.commonBaseUrl + 'h5/static/order/order1.png',
				payB: conf.commonBaseUrl + 'h5/static/order/order3.png',
				payC: conf.commonBaseUrl + 'h5/static/order/order4.png',
				payD: conf.commonBaseUrl + 'h5/static/order/order2.png',
				payE: conf.commonBaseUrl + 'h5/static/order/order5.png',
				scrollTop: 0,
				isHotline: false,
				goodsList: [],
				isLogin: false,
				userName: '',
				accountInfo: {
					integral: 0,
					integralMoney: 0,
					cash: 0,
					vipLevelName: 0
				},
				shop: {},
				logoutUser: false,
				shopId: '',
				conf: conf
			};
		},
		methods: {
			_load: function() {
				if (this.vc.hasLogin()) {
					this.isLogin = true;
					this.userName = getUserName();
					this._queryShopUserAccountAndVip();
				}
				this.shopId = getShopId();
				this._loadShop();
			},
			_queryShopUserAccountAndVip: function() {
				let _that = this;
				let shopId = getShopId();
				if (!shopId) {
					return;
				}
				queryShopUserAccountAndVip({
					shopId: shopId,
					userId: getUserId(),
					page: 1,
					row: 1
				}).then(_data => {
					_that.accountInfo = _data.data;
				})
			},
			//退出系统
			_logout: function() {
				this.logoutUser = true;
			},
			_cancleLogout: function() {
				this.logoutUser = false;
			},
			_doLogoutUser: function() {
				let token = wx.getStorageSync('token');
				if (!token || token == '') {
					uni.clearStorageSync();
					uni.navigateTo({
						url: "/pages/public/login"
					});
					return;
				}
				outUserLogin({
					token: token
				}).then(_data => {
					console.log(_data);
					if (_data.statusCode != 200) {
						uni.showToast({
							icon: "none",
							title: _data.data
						});
						return;
					}
					this.logoutUser = false;
					uni.clearStorageSync();
					uni.navigateTo({
						url: "/pages/public/login"
					});
				});
			},
			_loadShop: function() {
				let shopId = getShopId();
				if (!shopId) {
					return;
				}
				let _that = this;
				getShops({
					shopId: shopId,
					page: 1,
					row: 1
				}).then(res => {
					_that.shop = res[0]
				})
			},
			/**
			 * 关注跳转
			 */
			onCollect(type) {
				switch (type) {
					case 'goods':
						uni.navigateTo({
							url: '/pages/GoodsOn/GoodsOn'
						})
						break;
					case 'content':
						uni.navigateTo({
							url: '/pages/ContentCollection/ContentCollection'
						})
						break;
					case 'record':
						uni.navigateTo({
							url: '/pages/BrowsingHistory/BrowsingHistory'
						})
						break;
				}
			},
			/**
			 * 钱包跳转点击
			 */
			onWallet(type) {
				switch (type) {
					case 'integral':
						uni.navigateTo({
							url: '/pages/IntegralDetails/IntegralDetails',
						})
						break;
					case 'coupon':
						uni.navigateTo({
							url: '/pages/MyCoupon/MyCoupon',
						})
						break;
					case 'wallet':
						uni.navigateTo({
							url: '/pages/MyWallet/MyWallet',
						})
						break;
					case 'SignIn':
						uni.navigateTo({
							url: '/pages/SignIn/SignIn',
						})
						break;
					case 'payment':
						uni.navigateTo({
							url: '/pages/PaymentCode/PaymentCode',
						})
						break;
				}
			},
			/**
			 * 我的服务点击
			 */
			onServer(type) {
				switch (type) {
					case 'feedback':
						uni.navigateTo({
							url: '/pages/address/addressList'
						})
						break;
					case 'serve':
						let _that = this;
						uni.makePhoneCall({
							// 手机号
							phoneNumber: _that.shop.returnLink,
							// 成功回调
							success: (res) => {
								console.log('调用成功!')
							},
							// 失败回调
							fail: (res) => {
								console.log('调用失败!')
							}
						});
						break;
				}
			},
			/**
			 * 设置点击
			 */
			onSetting() {
				uni.navigateTo({
					url: '/pages/Setting/Setting'
				})
			},
			/**
			 * 消息点击
			 */
			onMessage() {
				uni.navigateTo({
					url: '/pages/Message/Message'
				})
			},
			/**
			 * 会员点击
			 */
			_toIntegral() {
				// uni.switchTab({
				// 	url: '/pages/cate/cate',
				// })
			},
			/**
			 * 跳转点击
			 * @param {String} type 跳转类型
			 */
			onSkip(type) {
				switch (type) {
					case 'goods':
						uni.navigateTo({
							url: '/pages/GoodsDetails/GoodsDetails',
							animationType: 'zoom-fade-out',
							animationDuration: 200
						})
						break;
				}
			},
			/**
			 * 用户信息点击
			 * @param {Number} type
			 */
			onUserInfo() {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			},
			toOrder: function(_url) {
				uni.navigateTo({
					url: _url
				})
			}
		}
	}
</script>

<style lang="scss">
	.page {
		position: absolute;
		width: 100%;
		// height: 100%;
		padding-bottom: 100rpx;
		background-color: #f6f6f6;
	}

	.my-top {
		position: relative;
		width: 100%;
		height: 380rpx;
		/* #ifdef APP-PLUS */
		height: 460rpx;
		/* #endif */
		background: linear-gradient(45deg, #F57C61, #FA5151);
		border-radius: 0 0 50% 50% / 0% 0% 15% 15%;
		overflow: hidden;

		.head {
			position: fixed;
			left: 0;
			top: 0;
			z-index: 100;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 100rpx;
			background-color: rgba(255, 255, 255, 0);

			// transition: all 1s;
			.portrait {
				display: flex;
				width: 60rpx;
				height: 60rpx;
				margin-left: 40rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 100%;
				}
			}

			.title {
				display: flex;
				align-items: center;

				text {
					color: #212121;
					font-size: 28rpx;
				}
			}

			.setting-mess {
				display: flex;
				align-items: center;
				height: 100%;
				margin-right: 20rpx;

				.setting {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 80rpx;
					height: 100%;

					text {
						color: #FFFFFF;
						font-size: 38rpx;
					}
				}

				.mess {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 80rpx;
					height: 100%;

					text {
						color: #FFFFFF;
						font-size: 38rpx;
					}
				}
			}
		}

		/* 用户信息 */
		.user-info {
			display: flex;
			align-items: center;
			padding: 0 5%;
			height: 120rpx;
			margin-top: 100rpx;
			/* #ifdef APP-PLUS */
			margin-top: 130rpx;

			/* #endif */
			.portrait {
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;

				box-sizing: border-box;

				image {
					width: 100%;
					height: 100%;
					border-radius: 100%;
					border: 4rpx solid #FFFFFF;
					box-sizing: border-box;
				}
			}

			.info {
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 70%;
				height: 100%;

				.nickname {
					width: 100%;
					padding: 10rpx 0;

					text {
						color: #FFFFFF;
						font-size: 28rpx;
					}
				}

				.rank {
					display: flex;
					align-items: center;
					width: 120rpx;
					height: 30rpx;
					padding: 0 10rpx;
					border: 2rpx solid #F0AD4E;
					border-radius: 30rpx;

					image {
						width: 24rpx;
						height: 24rpx;
					}

					text {
						font-size: 24rpx;
						color: #FFFFFF;
						margin-left: 10rpx;
					}
				}
			}
		}

		/* 关注区 */
		.focus-area {
			display: flex;
			align-items: center;
			width: 100%;
			height: 120rpx;

			.list {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 33%;
				height: 100%;

				.num {
					display: flex;
					align-items: center;

					text {
						color: #FFFFFF;
						font-size: 32rpx;
						font-weight: bold;
					}
				}

				.title {
					display: flex;
					align-items: center;
					margin-top: 5rpx;

					text {
						color: #FFFFFF;
						font-size: 24rpx;
					}
				}
			}
		}

		/* vip */
		.vip-info {
			position: absolute;
			left: 50%;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			padding: 0 4%;
			width: 90%;
			height: 80rpx;
			background-color: #464C5B;
			transform: translate(-50%, 0);
			border-radius: 10rpx 10rpx 0 0;

			.vip {
				position: relative;
				display: flex;
				align-items: center;
				width: 20%;
				height: 60rpx;

				text {
					color: #ffe678;
					font-size: 26rpx;
				}

				.line {
					position: absolute;
					right: 0;
					top: 40%;
					width: 2rpx;
					height: 20rpx;
					background-color: #ffe678;
				}
			}

			.vip-explain {
				display: flex;
				align-items: center;
				height: 60rpx;
				margin: 0 10rpx;

				text {
					color: #ffe678;
					font-size: 24rpx;
				}
			}

			.vip-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 140rpx;
				height: 40rpx;
				background-color: #ffe678;
				border-radius: 30rpx;
				margin-top: 10rpx;

				text {
					font-size: 24rpx;
					color: #464C5B;

				}
			}
		}
	}

	/* 订单信息 */
	.order-info {
		display: flex;
		width: 94%;
		height: 200rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		margin: 20rpx auto;

		.list {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 20%;
			height: 100%;

			.icon {
				position: relative;
				display: flex;
				align-items: center;

				.iconfont {
					font-size: 38rpx;
					color: #333333;
				}

				.num {
					position: absolute;
					right: -20rpx;
					top: -20rpx;
					padding: 4rpx;
					font-size: 18rpx;
					color: $base;
					border: 2rpx solid $base;
					border-radius: 100%;
					background-color: #FFFFFF;
				}
			}

			.title {
				display: flex;
				align-items: center;
				margin-top: 10rpx;

				text {
					color: #333333;
					font-size: 24rpx;
				}
			}
		}
	}

	/* 钱包 */
	.wallet-info {
		display: flex;
		width: 94%;
		height: 200rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		margin: 20rpx auto;

		.list {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 25%;
			height: 100%;

			.icon {
				position: relative;
				display: flex;
				align-items: center;

				.iconfont {
					font-size: 38rpx;
					color: $base;
				}

				.number {
					font-size: 28rpx;
					color: #212121;
					font-weight: bold;
				}
			}

			.title {
				display: flex;
				align-items: center;
				margin-top: 10rpx;

				text {
					color: #333333;
					font-size: 24rpx;
				}
			}
		}
	}

	/* 签到，付款码 */
	.integral-payment {
		display: flex;
		justify-content: space-between;
		width: 94%;
		height: 180rpx;
		margin: 20rpx auto;

		.list {
			width: 48%;
			height: 100%;
			background-color: #FFFFFF;
			border-radius: 20rpx;

			.title {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 120rpx;

				.iconfont {
					font-size: 48rpx;
					margin-right: 10rpx;
					font-weight: normal;
				}

				text {
					color: #212121;
					font-size: 28rpx;
					font-weight: bold;
				}
			}

			.mess {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;

				text {
					color: #C0C0C0;
					font-size: 26rpx;
				}
			}
		}
	}

	/* 我的服务 */
	.my-service {
		width: 94%;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx auto;

		.title {
			display: flex;
			align-items: center;
			padding: 0 4%;
			height: 80rpx;

			text {
				font-size: 28rpx;
				font-weight: bold;
				color: #212121;
			}
		}

		.service-list {
			display: flex;
			flex-wrap: wrap;
			padding: 0 4%;

			.list {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 25%;
				height: 120rpx;

				.thumb {
					width: 40rpx;
					height: 40rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.name {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 60rpx;

					text {
						color: #212121;
						font-size: 24rpx;
					}
				}
			}
		}
	}

	/* 为你推荐 */
	.recommend-info {
		width: 100%;
		background-color: #f2f2f2;

		.recommend-title {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100rpx;

			.title {
				display: flex;
				align-items: center;

				image {
					width: 416rpx;
					height: 40rpx;
				}
			}
		}

		.goods-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 0 30rpx;

			.list {
				width: 49%;
				height: 540rpx;
				margin-bottom: 20rpx;
				background-color: #FFFFFF;
				border-radius: 10rpx;
				overflow: hidden;

				.pictrue {
					display: flex;
					justify-content: center;
					width: 100%;

					image {
						height: 350rpx;
					}
				}

				.title-tag {
					// display: flex;
					height: 100rpx;
					padding: 20rpx;

					.tag {
						float: left;
						margin-right: 10rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						white-space: normal;
						font-size: 26rpx;
						line-height: 40rpx;

						text {
							font-size: 24rpx;
							color: #FFFFFF;
							padding: 4rpx 16rpx;
							background: linear-gradient(to right, $base, $change-clor);
							border-radius: 6rpx;
							margin-right: 10rpx;
						}
					}
				}

				.price-info {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					justify-content: space-between;
					padding: 0 20rpx;
					height: 80rpx;

					.user-price {
						display: flex;
						align-items: center;

						text {
							color: $price-clor;
						}

						.min {
							font-size: 24rpx;
						}

						.max {
							font-size: 32rpx;
						}
					}

					.vip-price {
						display: flex;
						align-items: center;

						image {
							width: 26rpx;
							height: 26rpx;
							margin-right: 10rpx;
						}

						text {
							color: #fcb735;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}

	/* 客服热线弹窗 */
	.serve-hotline {
		.cu-dialog {
			width: 100%;
			border-radius: 20rpx 20rpx 0 0 !important;

			.contact-list {
				width: 100%;

				.list {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 100rpx;

					text {
						color: #222222;
						font-size: 32rpx;
					}
				}
			}
		}
	}
</style>